// noop
import SegmentedButtons from "@renderer/components/business/segmented-buttons";
import { Label } from "@renderer/components/ui/base/field";
import { useThemeSetting } from "@renderer/queries/hooks/use-settings";
import type { Theme } from "@shared/triplit/types";
import { Laptop, Moon, Sun } from "lucide-react";
import { useMemo } from "react";
import { useTranslation } from "react-i18next";

const { configService } = window.service;

export function ThemeSwitcher() {
  const { t } = useTranslation("translation", {
    keyPrefix: "settings.general-settings.theme",
  });

  const { data: theme } = useThemeSetting();

  const handleThemeChange = async (newTheme: Theme) => {
    await configService.setAppTheme(newTheme);
  };

  const themeOptions = useMemo(
    () => [
      {
        key: "light",
        icon: <Sun className="size-4" />,
        label: t("light"),
      },
      {
        key: "dark",
        icon: <Moon className="size-4" />,
        label: t("dark"),
      },
      {
        key: "system",
        icon: <Laptop className="size-4" />,
        label: t("system"),
      },
    ],
    [t],
  );

  return (
    <div className="flex flex-col gap-2">
      <Label className="text-label-fg">{t("label")}</Label>

      <SegmentedButtons
        options={themeOptions}
        selectedKey={theme}
        onSelect={(key) => handleThemeChange(key as Theme)}
      />
    </div>
  );
}
